<template>
  <div>
    <div class="querenBuy" v-loading="loading">
      <div class="order_detail">
        <div class="detail_a flex">
          <p>购物车</p>
        </div>
        <!-- <div class="all_car">我的购物车({{total}})</div> -->
        <div class="order_calssify flex" v-if="total!=0">
          <p>商品</p>
          <p>单价</p>
          <p>数量</p>
          <p>金额</p>
          <p>操作</p>
        </div>
        <div class="car_list flex" v-for="(list,index) in array" :key="index">
          <div class="choose_item" @click="chooseitem(list)">
            <div class="c2_a"></div>
            <img src="../../assets/dui.png" alt class="c2_img" v-if="list.choose==true" />
          </div>
          <div class="order_con flex">
            <div class="order_con_a flex">
              <img :src="list.ykGoods.photo" alt />
              <div class="con_a_title hidden">{{list.ykGoods.title}}</div>
            </div>
            <div class="order_con_b">{{list.ykGoods.price}}</div>
            <div class="addnum" v-if="list.ykGoods.type=='3'">
              <el-input-number
                v-model="list.booknum"
                @change="handleChange($event,list.id)"
                :min="1"
                v-if="list.booknum==null?list.booknum=1:list.booknum"
              ></el-input-number>
            </div>
            <div class="order_con_b" v-else>x1</div>
            <div class="order_con_d">{{list.allP}}</div>
            <div class="detil_con_d" @click="detail_cari(list.id)">删除</div>
          </div>
        </div>
        <div class="order_q flex" v-if="total!=0">
          <div class="queren_price flex">
            <div class="choose_item2" @click="chs_all()">
              <div class="c2_a"></div>
              <img src="../../assets/dui.png" alt class="c2_img" v-if="c_all==true" />
            </div>
            <div class="c_qunxuan">全选</div>
            <div class="detil_all" @click="detail_carA">删除</div>
          </div>
          <div class="submit_order flex">
            <div class="choose_num_a flex">
              已选商品
              <span>{{c_num}}</span>件
            </div>
            <div class="choose_price flex">
              合计：
              <span>￥{{c_price}}</span>
            </div>
            <button class="sumbit" @click="sumbit()">结算</button>
          </div>
        </div>
        <div v-else class="tip2">
          <img src="../../assets/none.png" alt />
        </div>
      </div>
    </div>
    <div class="modal_delate">
      <el-dialog :visible.sync="modelDelate" width="338px" title="删除">
        <span class="delate_con">您确定要删除该商品吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="delateSure()">确 定</el-button>
          <el-button @click="modelDelate = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  ykUserAddr,
  addAddr,
  editAddr,
  cart,
  removecart,
  ykCartedit
} from "../../api/index.js";
export default {
  props: {},
  data() {
    return {
      loading: true,
      modelDelate: false,
      array: [],
      total: 0,
      c_all: false,
      c_num: 0,
      c_price: 0,
      d_id: "" //删除的id
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (localStorage.getItem("YKuserid")) {
      this.post();
    } else {
      this.open();
    }
    this.$parent.activeItem();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        userId: localStorage.getItem("YKuserid")
      };
      cart(this.qs(msg))
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            if (res.data.rows.length > 0) {
              for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i].choose = false;
                res.data.rows[i].allP = Number(
                  res.data.rows[i].ykGoods.price * res.data.rows[i].booknum || 1
                );
              }
            }
            res.data.allChoose = false;
            this.array = res.data.rows;
            this.total = res.data.total;
            this.$parent.toheader();
          } else {
            this.$message({
              type: "info",
              message: res.data.msg
            });
          }
        })
        .catch(e => {});
    },
    open() {
      this.$confirm("请点击右上方登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //选择
    chooseitem(item) {
      this.c_price = this.c_price - 0;
      if (item.choose == false) {
        item.choose = true;
        this.c_num++;
        this.c_price += item.allP - 0;
      } else {
        this.c_num--;
        item.choose = false;
        this.c_all = false;
        this.c_price -= item.allP - 0;
      }
      this.c_price = this.c_price.toFixed(2);
    },
    //全选
    chs_all() {
      this.c_price = 0;
      if (this.c_all == false) {
        this.c_all = true;
        this.c_num = this.total;
        for (let i = 0; i < this.array.length; i++) {
          this.array[i].choose = true;
          this.c_price += this.array[i].allP - 0;
        }
        this.c_price = this.c_price.toFixed(2);
      } else {
        this.c_all = false;
        this.c_num = 0;
        for (let i = 0; i < this.array.length; i++) {
          this.array[i].choose = false;
        }
        this.c_price = 0;
      }
    },
    //单选删除
    detail_cari(id) {
      this.modelDelate = true;
      this.d_id = id;
    },
    delateSure() {
      let msg = {
        ids: this.d_id
      };
      removecart(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.post();
            this.modelDelate = false;
            this.c_num = 0;
            this.c_price = 0;
          }
        })
        .catch(e => {});
    },
    //全选删除
    detail_carA() {
      let a = [];
      for (let i = 0; i < this.array.length; i++) {
        if (this.array[i].choose == true) {
          a.push(this.array[i].id);
        }
      }
      a = a.join(",");
      this.d_id = a;
      if (a.length != 0) {
        this.modelDelate = true;
      } else {
        this.$message({
          type: "info",
          message: "请选择要删除的商品"
        });
      }
    },
    sumbit() {
      let b = [];
      let c = [];
      for (let i = 0; i < this.array.length; i++) {
        if (this.array[i].choose == true) {
          b.push(this.array[i].goodsId);
          c.push(this.array[i].booknum);
        }
      }
      b = b.join(",");
      c = c.join(",");
      if (b) {
        this.$router.push({
          name: "querenBuy",
          params: {
            order: b,
            buynum: c
          }
        });
      } else {
        this.$confirm("请选择商品", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {})
          .catch(() => {});
      }
    },
    //步进器
    handleChange(value, id) {
      let msg = {
        id: id,
        booknum: value
      };
      ykCartedit(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.post();
          }
        })
        .catch(e => {});
    }
  },
  components: {}
};
</script>

<style scoped>
.detail_a {
  justify-content: space-between;
  margin-left: 25px;
  margin-right: 24px;
  border-bottom: 1px solid #57595e;
}
.detail_a > p:nth-child(1) {
  font-size: 18px;
  height: 48px;
  line-height: 64px;
  color: #c9a650;
}
.querenBuy {
  width: 937px;
  margin-bottom: 102px;
}
/* order_detail */
.order_detail {
  width: 100%;
  overflow: hidden;
}
.order_calssify {
  width: 100%;
  height: 42px;
  background: #5a5960;
  margin-bottom: 16px;
  margin-top:32px;
}
.order_calssify > p {
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
  margin-left: 30px;
  width: 105px;
  text-align: center;
  /* border-left: 1px solid #faf7f7;
  border-right: 1px solid #faf7f7; */
}
.order_calssify > p:nth-child(1) {
  margin-left: 94px !important;
  width: 315px !important;
}
.order_con > div {
  /* border-left: 1px solid #fff;
  border-right: 1px solid #fff; */
}
.order_con_a {
  width: 315px;
}
.order_con_a > img {
  width: 72px;
  height: auto;
}
.car_list {
  width: 100%;
  border-bottom: 1px solid #494b51;
  margin-bottom: 13px;
}
.con_a_title {
  width: 228px;
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
  margin-left: 15px;
}
.order_con_b {
  width: 105px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
}
.order_con_d {
  width: 105px;
  text-align: center;
  font-size: 18px;
  color: #dfd4d4;
}
.alone_price {
  font-size: 14px;
  color: #dfd4d4;
  margin-top: 45px;
  justify-content: flex-end;
  margin-right: 68px;
}
.alone_price > span {
  font-size: 18px;
  color: #d81417;
}
.order_con {
  padding-top: 23px;
  padding-bottom: 24px;
  width: 856px;
  justify-content: space-around;
}

.choose_item {
  margin-left: 23px;
  margin-right: 45px;
  position: relative;
  cursor: pointer;
}
.c2_a {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(153, 153, 153, 1);
}
.c2_img {
  width: 14px;
  height: 10px;
  position: absolute;
  top: 0;
}
/* order_q */
.order_q {
  width: 100%;
  height: 47px;
  background: #46474e;
  justify-content: space-between;
}
.order_q div {
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
}
.choose_item2 {
  margin-left: 50px;
  margin-right: 3px;
  position: relative;
  cursor: pointer;
}
.detil_all {
  margin-left: 60px;
  cursor: pointer;
}
.choose_num_a > span {
  font-size: 18px;
  color: #c9a650;
  display: block;
}
.choose_price {
  margin-left: 22px;
  margin-right: 33px;
}
.choose_price > span {
  font-size: 24px;
  color: #c9a650;
  display: block;
}
.sumbit {
  width: 107px;
  height: 46px;
  background: #c9a650;
  cursor: pointer;
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: #25272f;
  border: none;
  font-family: microsoft yahei;
}
.detil_con_d {
  width: 105px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #dfd4d4;
}
.modal_delate >>> .el-dialog {
  border-radius: 10px !important;
  margin-top: 297px !important;
}
/* .el-message-box__btns .el-button--primary {
    background-color: #ff0004!important;
    border-color: #ff0004!important;
} */
.modal_delate >>> .el-dialog__header {
  height: 38px;
  background: rgba(253, 224, 225, 1);
  border-radius: 10px 10px 0px 0px;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.modal_delate >>> .el-dialog__headerbtn {
  top: 10px !important;
}
.modal_delate >>> .el-dialog__title {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
  margin-left: 18px;
}
.delate_con {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
}
.modal_delate >>> .el-dialog__body {
  text-align: center !important;
  padding: 41px 0 !important;
}
.modal_delate >>> .el-dialog__footer {
  padding: 0px 32px 26px 32px !important;
}
.modal_delate >>> .dialog-footer {
  display: block !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}
.modal_delate >>> .dialog-footer > button {
  height: 40px !important;
  border-radius: 3px !important;
  color: rgba(51, 51, 51, 1) !important;
  background-color: rgba(237, 237, 237, 1) !important;
  border-color: rgba(153, 153, 153, 1) !important;
  font-size: 16px !important;
}
.modal_delate >>> .dialog-footer > button {
  width: 83px !important;
}
/* bujinqi */
.addnum >>> .el-input-number {
  width: 105px;
  line-height: 27px;
}
.addnum >>> .el-input-number__decrease,
.addnum >>> .el-input-number__increase {
  width: 27px;
  height: 26px;
  background: #ececec;
  color: #333333;
}
.addnum >>> .el-input__inner {
  height: 28px;
  line-height: 27px;
}
.addnum >>> .el-input-number,
.addnum >>> .el-input__inner {
  padding-left: 0px;
  padding-right: 0px;
}
.addnum >>> .el-input {
  width: 105px;
}
.addnum
  >>> .el-input-number__decrease:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled),
.addnum
  >>> .el-input-number__increase:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled) {
  border-color: none !important;
}
</style>
